@charset "UTF-8";
/* 首頁輪播 */
.slide { position: relative; z-index: 1; width: 100%; height: 7rem; background-color: #1f1f2a; overflow: hidden; }

.slide-list { display: flex; width: 100%; height: 100%; }
.slide-item { position: relative; z-index: 1; flex-shrink: 0; width: 100%; height: 100%; overflow: hidden; background-color: #1f1f2a; transition-property: opacity; }
.slide-item::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
    opacity: .25;
    background: url(../images/logo.png)center no-repeat;
    background-size: auto .42rem;
    }
.slide-item > a { position: relative; display: block; width: 100%; height: 100%; background: center no-repeat; background-size: cover; text-indent: 9999em; transform: scale3d(1.05,1.05,1.05); }
.slide-item.slide-active > a { transition: transform 15s .2s; transform: scale3d(1,1,1); }
.slide > .prev,
.slide > .next {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 99;
    width: .6rem;
    height: .6rem;
    margin-top: auto;
    margin-bottom: auto;
    border: none;
    border-top: .04rem solid #fff;
    border-right: .04rem solid #fff;
    opacity: .3;
    background: none;
    outline: none;
    text-indent: -999em;
    transition: opacity .25s linear, transform .2s linear; }
.slide > .prev { left: .5rem; transform: rotate(-135deg); }
.slide > .next { right: .5rem; transform: rotate(45deg); }

.slide > .prev:hover,
.slide > .prev:active { opacity: .85; transform: translateX(-0.05rem) rotate(-135deg); }
.slide > .next:hover,
.slide > .next:active { opacity: .85; transform: translateX(.05rem) rotate(45deg); }

.slide-pos { position: absolute; bottom: .4rem; left: 0; right: 0; z-index: 199; display: flex; justify-content: center; margin-left: auto; margin-right: auto; }
.slide-pos > span { display: block; width: .4rem; margin-left: .06rem; margin-right: .06rem; cursor: pointer; outline: none; }
.slide-pos > span::after { content: ''; display: block; width: 100%; height: 2px; padding-bottom: .05rem; border-top: 2px solid #fff; opacity: .2; text-indent: -999em; transition: opacity .2s, transform .2s; }
.slide-pos > span:hover::after,
.slide-pos > span:active::after { opacity: 1; transform: translateY(-1px);}
.slide-pos > span.active::after { opacity: 1; transform: none; }

.mod { position: relative; width: 100%; padding-top: .7rem; padding-bottom: .8rem; overflow-x: hidden; }
.mod:nth-of-type(2n) { background-color: #1f1f2a; }
.mod:nth-of-type(2n+1) { background-color: #ebebeb; }
.mod:nth-of-type(2n+1) .mod-title { color: #3c359f; }
.mod:nth-of-type(2n+1) .mod-title > strong { color: #333; }
.mod:nth-of-type(2n+1) .mod-title > em { opacity: .08; }
.mod:nth-of-type(2n+1) .mod-more { background-image:url(''); }
.mod-hd { position: relative; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; width: 14.2rem; max-width: 100%; margin-bottom: .4rem; margin-left: auto; margin-right: auto; }
.mod-bd { width: 14.2rem; max-width: 100%; margin-left: auto; margin-right: auto; }
.mod-title { position: relative; z-index: 1; display: flex; flex: 1; font-size: .4rem; line-height: 1.5; color: #8178ff; user-select: none; }
.mod-title > strong { color: #fff; }
.mod-title > em { position: absolute; bottom: -.08rem; left: -.05rem; z-index: -1; color: #3c359f; font-size: .6rem; opacity: .12; }
.mod-more { display: block; padding-left: .5rem; color: #5f5b9a; font-size: .2rem; line-height: .48rem; background: url('') left center no-repeat; background-size: auto .08rem; transition: transform .25s linear; }
.mod-more:hover,
.mod-more:active { transform: translateX(.05rem); }

/* 精品推薦 */
.game-rec { padding-bottom: 1.4rem; }
.game-rec-bd { width: 100%; position: relative; }
.game-rec-list { display: flex; width: 100%; }
.game-rec-list > li { flex-shrink: 0;  width: 4.5rem; height: 4.2rem; border-radius: .08rem; overflow: hidden; margin-left: .35rem; transition: transform .5s linear, box-shadow .5s linear; background-color: rgba(0, 0, 0, .5); }
.game-rec-list > li:first-of-type { margin-left: 0; }
.game-rec-list > li.active { backface-visibility: hidden; transform: translate3d(0, -.35rem, 0); box-shadow: 0 .25rem .35rem rgba(38,34,98,.2); }
.game-rec-item { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.game-rec-item:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    background-color: #000;
    opacity: 0;
    transform: scale3d(1.5,1.5,1.5);
    transition: opacity .2s, transform .2s;
    }
.game-rec-item > .game-pic { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; border-radius: inherit; background: center no-repeat; background-size: cover; transition: transform 2.5s linear; }
.game-rec-item > .game-meta {
    box-sizing: border-box;
    position: absolute;
    top: .56rem;
    right: .3rem;
    bottom: .56rem;
    left: .3rem;
    z-index: 4;
    display: none;
    margin: auto;
    color: #dedede;
    font-size: .16rem;
    }
.game-rec-item > .game-meta > .name {
    color: #6177ca;
    font-size: 2em;
    line-height: 1.25;
    text-align: center;
    font-weight: 500;
    animation: fadeInDown .3s .2s linear;
    animation-fill-mode: both;
    }
.game-rec-item > .game-meta > .type {
    color: #fff;
    line-height: 2.5;
    text-align: center;
    font-weight: 400;
    animation: fadeInDown .3s .5s linear;
    animation-fill-mode: both;
    }
.game-rec-item > .game-meta > .type > span { margin-left: 1em; margin-right: 1em; }
.game-rec-item > .game-meta > .desc {
    max-height: 1.8rem;
    padding-top: .23rem;
    margin-top: .18rem;
    border-top: 1px solid #252533;
    line-height: 1.875;
    overflow: hidden;
    word-break: break-all;
    animation: fadeInUp .3s .8s linear;
    animation-fill-mode: both;
    }
.game-rec-item:hover:after,
.game-rec-item:active:after { opacity: .9; transform: scale3d(1,1,1); }
.game-rec-item:hover > .game-pic,
.game-rec-item:active > .game-pic { transition-duration: 10s; transform: scale3d(1.1,1.1,1.1); }
.game-rec-item:hover > .game-meta,
.game-rec-item:active > .game-meta { display: block; }

.game-rec-pos { position: absolute; left: 0; right: 0; z-index: 99; display: flex; justify-content: center; margin: .5rem auto 0; text-align: center; }
.game-rec-pos > span { display: block; width: .08rem; height: .08rem; margin-left: .06rem; margin-right: .06rem; background-color: #3b3b49; text-indent: -999em; transition: background-color .2s, transform .2s; }
.game-rec-pos > span:hover,
.game-rec-pos > span:active,
.game-rec-pos > span.active { background-color: #8178ff; transform: scale3d(1.25,1.25,1.25); }

.game-rec-prev,
.game-rec-next { position: absolute; top: 0; bottom: 0; z-index: 99; box-sizing: border-box; width: .8rem; height: .8rem; border: 1px solid #282460; border-radius: 0; background-color: rgba(255, 255, 255, .5); margin-top: auto; margin-bottom: auto; text-indent: -999em; transition: background-color .25s linear, transform .25s linear; outline: none; }
.game-rec-prev::after,
.game-rec-next::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: .26rem;
    height: .26rem;
    margin: auto;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    }
.game-rec-prev::after { transform: translateX(.09rem) rotate(-135deg); }
.game-rec-next::after { transform: translateX(-.09rem) rotate(45deg); }
.game-rec-prev:hover,
.game-rec-prev:active { background-color: #fff; transform: translateX(-0.05rem); }
.game-rec-next:hover,
.game-rec-next:active { background-color: #fff; transform: translateX(.05rem); }
.game-rec-prev { left: 50%; margin-left: -7.3rem; }
.game-rec-next { right: 50%; margin-right: -7.3rem; }

/* 焦點資訊 */
.game-news {}
.game-news-bd {}
.game-news-list { display: flex; flex-wrap: wrap; margin-left: -.2rem; margin-top: -.3rem; }
.game-news-item { flex-shrink: 0; box-sizing: border-box; display: flex; width: 7rem; height: 1.8rem; padding: .1rem; margin-left: .2rem; margin-top: .3rem; background-color: #f5f5f5; transition: background-color .2s, transform .25s linear, box-shadow .25s linear; }
.game-news-item:hover,
.game-news-item:active { background-color: #fff; transform: translateY(-0.1rem); box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .1); }
.game-news-item-side { width: 1.8rem; height: 1.8rem; margin-right: .2rem; transform: translateY(-.2rem); }
.game-news-item-side > .news-pic { display: block; width: 100%; height: 100%; background: #ddd center no-repeat; background-size: cover; }
.game-news-item-main { flex: 1; }
.game-news-item-main > .news-title { max-height: .64rem; font-size: .2rem; line-height: 1.6; font-weight: 500; overflow: hidden; }
.game-news-item-main > .news-title > strong { display: inline-block; width: .52rem; height: .2rem; color: #fff; font-weight: 500; font-size: .14rem; text-align: center; line-height: .2rem; background: url('') left center no-repeat; vertical-align: .03rem; }
.game-news-item-main > .news-title > a:hover,
.game-news-item-main > .news-title > a:active { color: #000; }
.game-news-item-main > .news-desc { max-height: .72rem; margin-top: .1rem; color: #666; font-size: .16rem; line-height: 1.5; overflow: hidden; }
.game-news-item-main > .news-desc > a { margin-left: .1rem; color: #6177ca; }
.game-news-item-main > .news-desc > a:hover,
.game-news-item-main > .news-desc > a:active { text-decoration: underline; }

/* 遊戲預購 */
.game-booking { padding-bottom: 1rem; }
.game-booking-hd > .mod-title > em { left: .1rem; }
.game-booking-bd { position: relative; width: 100%; padding-top: .4rem; }
.game-booking-list { display: flex; width: 100%; }
.game-booking-item { position: relative; display: flex; flex-shrink: 0; width: 14.2rem; max-width: 100%; height: 4.6rem; margin-left: .35rem; overflow: hidden; transition: transform .3s linear, box-shadow .3s linear; }
.game-booking-item:first-of-type { margin-left: 0; }
.game-booking-item:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: .4;
    transition: opacity .2s;
    }
.game-booking-item.active { backface-visibility: hidden; transform: translate3d(0, -.4rem, 0); box-shadow: 0 .1rem .4rem rgba(29,26,89,.3); }
.game-booking-item.active:after { z-index: -9; opacity: 0; }
.game-booking-item.active .game-count > i { transform: scaleX(1); }
.game-booking-item.active .game-count > i::after { animation: gameCountLight .35s 5 linear alternate-reverse; }
@keyframes gameCountLight {
    0% { opacity: .25; }
    100% { opacity: 1; }
}
.game-booking-item.active .game-count > i > span { animation: bounceIn .3s 1.75s; animation-fill-mode: both; }
.game-booking-item-side { width: 8rem; height: 100%; background: #222 url(../images/logo.png) center no-repeat; background-size: auto .3rem; overflow: hidden; }
.game-booking-item-side > .game-pic { display: block; width: 100%; height: 100%; background: #dedede center no-repeat; background-size: cover; }
.game-booking-item-main { flex: 1; padding: .3rem; background-color: #fff; }
.game-booking-item-main > .game-name { max-height: .96rem; font-size: .32rem; line-height: 1.5; font-weight: 500; }
.game-booking-item-main > .game-name > a:hover,
.game-booking-item-main > .game-name > a:active { color: #000; }
.game-booking-item-main > .game-desc { max-height: 1.2rem; margin-top: .2rem; overflow: hidden; color: #777; font-size: .18rem; line-height: 1.66; }
.game-booking-item-main > .game-tip { max-height: .6rem; margin-top: .08rem; overflow: hidden; color: #777; font-size: .18rem; line-height: 1.66; }
.game-booking-item-main > .game-count { position: relative; box-sizing: border-box; height: .2rem; padding: .03rem; margin-top: .4rem; border-radius: .1rem; background-color: #1f1f2a; }
.game-booking-item-main > .game-count > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: #3c359f;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.5s linear .25s;
    box-shadow: 0 0 .1rem #6156cc, -1px 2px .05rem rgba(255, 255, 255, .55) inset;
    }
.game-booking-item-main > .game-count > i::before,
.game-booking-item-main > .game-count > i::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    border-radius: inherit;
    background-image: linear-gradient(-90deg, rgba(255,255,255,.5), rgba(255,255,255,0));
    }
.game-booking-item-main > .game-count > i::after { width: 10%; background-image: linear-gradient(-90deg, rgba(255,255,255,1), rgba(255,255,255,0)); box-shadow: 2px 0 3px rgba(255, 255, 255, .75); }
.game-booking-item-main > .game-count > i > span {
    position: absolute;
    bottom: 100%;
    right: -.2rem;
    width: .49rem;
    height: .22rem;
    margin-bottom: .1rem;
    padding-bottom: .08rem;
    color: #fff;
    font-size: .16rem;
    font-weight: 500;
    line-height: .22rem;
    font-style: normal;
    background: url('') left bottom no-repeat;
    background-size: auto 100%;
    text-align: center;
    opacity: 0;
    animation-fill-mode: both;
    }
.game-booking-item-main > .game-info { display: flex; justify-content: space-between; height: .24rem; margin-top: .15rem; overflow: hidden; line-height: .24rem; }
.game-booking-item-main > .game-info > .time { padding-left: .32rem; color: #3c359f; font-size: .18rem; background: url('') left center no-repeat; background-size: auto 100%; }
.game-booking-item-main > .game-info > .time > b { margin-left: .05rem; margin-right: .05rem; font-weight: 600; }
.game-booking-item-main > .game-info > .price-count { text-align: right; color: #666; font-size: .2rem; font-weight: 500; }
.game-booking-item-main > .game-info > .price-count > b { margin-left: .08rem; color: #de3233; }

.game-booking-pos { position: absolute; left: 0; right: 0; display: flex; justify-content: center; margin: .1rem auto 0; }
.game-booking-pos > span { display: block; width: .08rem; height: .08rem; margin-left: .06rem; margin-right: .06rem; background-color: #3b3b49; text-indent: -999em; transition: background-color .2s, transform .2s; }
.game-booking-pos > span:hover,
.game-booking-pos > span:active,
.game-booking-pos > span.active { background-color: #8178ff; transform: scale3d(1.25,1.25,1.25); }

.game-booking-prev,
.game-booking-next { position: absolute; top: 0; bottom: 0; z-index: 99; box-sizing: border-box; width: .8rem; height: .8rem; border: 1px solid #282460; border-radius: 0; background-color: rgba(255, 255, 255, .5); margin-top: auto; margin-bottom: auto; text-indent: -999em; transition: background-color .25s linear, transform .25s linear; outline: none; }
.game-booking-prev::after,
.game-booking-next::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: .26rem;
    height: .26rem;
    margin: auto;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    }
.game-booking-prev::after { transform: translateX(.09rem) rotate(-135deg); }
.game-booking-next::after { transform: translateX(-.09rem) rotate(45deg); }
.game-booking-prev:hover,
.game-booking-prev:active { background-color: #fff; transform: translateX(-0.05rem); }
.game-booking-next:hover,
.game-booking-next:active { background-color: #fff; transform: translateX(.05rem); }
.game-booking-prev { left: 50%; margin-left: -8.1rem; }
.game-booking-next { right: 50%; margin-right: -8.1rem; }

/* 手機端適配 */
@media only screen and (max-width: 768px) {
    .slide { height: 5rem; }
    .slide > .prev,
    .slide > .next { display: none; }
    .slide-pos { bottom: .24rem; }
    .slide-pos > span { width: .2rem; height: .06rem; margin-left: .05rem; margin-right: .05rem; }

    .mod { padding-top: .5rem; padding-bottom: .5rem; }
    .mod-hd { padding-left: .3rem; padding-right: .3rem; }
    .mod-more { font-size: .22rem; }
    .mod-title > em { left: .05rem; bottom: -.12rem; font-style: normal; transform: skewX(-10deg); }
    .mod:nth-of-type(2n+1) .mod-title > em { opacity: .06; }

    /* 精品推薦 */
    .game-rec { padding-bottom: .98rem; }
    .game-rec-hd { margin-bottom: .8rem; }
    .game-rec-pos { margin-top: .4rem; }
    .game-rec-prev { left: 0; margin-left: 0; }
    .game-rec-next { right: 0; margin-right: 0; }

    .game-rec-list > li { border-radius: .4rem; overflow: hidden; }
    .game-rec-list > li.active > .game-rec-item > .game-meta { display: flex; }
    .game-rec-item:after { display: none; }
    .game-rec-item > .game-meta { left: 0; right: 0; bottom: 0; top: 0; height: 1.1rem; flex-direction: column; justify-content: center; align-items: center; padding-left: .2rem; padding-right: .2rem; margin-top: auto; margin-bottom: 0; background-color: rgba(0, 0, 0, .65); }
    .game-rec-item > .game-meta > .name { width: 100%; color: #fff; font-size: .32rem; }
    .game-rec-item > .game-meta > .desc { display: none; }
    .game-rec-item > .game-meta > .type { font-size: .22rem; line-height: 1.6; }

    /* 焦點資訊 */
    .game-news { padding-bottom: .6rem; }
    .game-news-bd {}
    .game-news-list { margin-left: .2rem; margin-right: .2rem; margin-top: unset; }
    .game-news-item { width: 100%; height: 2rem; margin-left: unset; background-color: #fff; }
    .game-news-item:hover,
    .game-news-item:active { transform: translateY(-.05rem); }
    .game-news-item:first-of-type { margin-top: 0; }
    .game-news-item-side { width: 2rem; height: 2rem; }
    .game-news-item-main > .news-title { max-height: .72rem; font-size: .28rem; line-height: .36rem; font-weight: 400; }
    .game-news-item-main > .news-title > strong { width: .62rem; height: .26rem; margin-right: .05rem; line-height: .26rem; font-size: .2rem; }
    .game-news-item-main > .news-desc { max-height: .84rem; margin-top: .15rem; font-size: .2rem; line-height: .28rem; }
    .game-booking { padding-top: 0; padding-bottom: 0; }
    .game-booking-hd { display: none; }
    .game-booking-bd { padding-top: 0; }
    .game-booking-item { height: auto; flex-direction: column; margin-left: 0; }
    .game-booking-item::after { display: none; }
    .game-booking-item.active { transform: none; box-shadow: none; }
    .game-booking-item-side { width: 100%; height: 4.6rem; }
    .game-booking-item-main { display: flex; flex-direction: column; box-sizing: border-box; height: 5.1rem; padding-top: .25rem; padding-bottom: .25rem; }
    .game-booking-item-main > .game-name { font-size: .36rem; line-height: .48rem; }
    .game-booking-item-main > .game-desc { max-height: 1.6rem; font-size: .24rem; line-height: .32rem; color: #666; }
    .game-booking-item-main > .game-tip { max-height: .64rem; margin-top: .15rem; font-size: .24rem; line-height: .32rem; color: #666; }
    .game-booking-item-main > .game-count { padding: .02rem; margin-top: auto; }
    .game-booking-item-main > .game-count > i > span { right: -0.35rem; width: .84rem; height: .38rem; padding-bottom: .15rem; line-height: .38rem; font-size: .26rem; background-size: 100% auto; }

    .game-booking-pos { top: 4.32rem; margin: unset; }
    .game-booking-pos > span { background-color: #2a3246; }
    .game-booking-pos > span:hover,
    .game-booking-pos > span:active,
    .game-booking-pos > span.active { background-color: #e1e1e1; }

    .game-booking-prev { top: 1.92rem; left: 0; margin: unset; }
    .game-booking-next { top: 1.92rem; right: 0; margin: unset; }
    .game-booking-item-main > .game-info { height: .3rem; line-height: .3rem; margin-top: .18rem; font-size: .24rem; }
    .game-booking-item-main > .game-info > .time { padding-left: .4rem; font-size: inherit; }
    .game-booking-item-main > .game-info > .price-count { font-size: .28rem; }
}

